<template>
	<view class="box">
		<view class="header">
			<view class="header-left"><text>近一年</text></view>
			<view class="example-body">
				<uni-datetime-picker
					v-model="data.single"
					type="daterange"
					@maskClick="maskClick"
				>
					<view class="picker">
						<text>选择时间</text>
						<view class="iconfont icon-xiangxia1"></view>
					</view>
				</uni-datetime-picker>
			</view>
		</view>
		<view class="content">
			<view class="content-left">
				<text>男性基础体检A套餐</text>
				<text>内科 刘美</text>
				<text>2017-11-13 11：05</text>
			</view>
			<view class="content-right">
				<navigator
					url="/pages/reportSel/examinationReport/examinationReport"
				>
					查看详情
				</navigator>
			</view>
		</view>
		<view class="content">
			<view class="content-left">
				<text>男性基础体检A套餐</text>
				<text>内科 刘美</text>
				<text>2017-11-13 11：05</text>
			</view>
			<view class="content-right">
				<navigator
					url="/pages/reportSel/examinationReport/examinationReport"
				>
					查看详情
				</navigator>
			</view>
		</view>
		<view class="content">
			<view class="content-left">
				<text>男性基础体检A套餐</text>
				<text>内科 刘美</text>
				<text>2017-11-13 11：05</text>
			</view>
			<view class="content-right">
				<navigator
					url="/pages/reportSel/examinationReport/examinationReport"
				>
					查看详情
				</navigator>
			</view>
		</view>
		<view class="content">
			<view class="content-left">
				<text>男性基础体检A套餐</text>
				<text>内科 刘美</text>
				<text>2017-11-13 11：05</text>
			</view>
			<view class="content-right">
				<navigator
					url="/pages/reportSel/examinationReport/examinationReport"
				>
					查看详情
				</navigator>
			</view>
		</view>
		<view class="content">
			<view class="content-left">
				<text>男性基础体检A套餐</text>
				<text>内科 刘美</text>
				<text>2017-11-13 11：05</text>
			</view>
			<view class="content-right">
				<navigator
					url="/pages/reportSel/examinationReport/examinationReport"
				>
					查看详情
				</navigator>
			</view>
		</view>
		<view class="content">
			<view class="content-left">
				<text>男性基础体检A套餐</text>
				<text>内科 刘美</text>
				<text>2017-11-13 11：05</text>
			</view>
			<view class="content-right">
				<navigator
					url="/pages/reportSel/examinationReport/examinationReport"
				>
					查看详情
				</navigator>
			</view>
		</view>
		<view class="footer"></view>
	</view>
</template>

<script setup>
import { reactive } from 'vue'
let data = reactive({ single: '' })
let maskClick = () => {
	console.log(1111)
	console.log(data)
}
</script>

<style scoped lang="less">
.box {
	width: 750rpx;
	background-color: #fbfdff;
}
.header {
	width: 688rpx;
	height: 72rpx;
	padding: 46rpx 30rpx 32rpx 30rpx;
	display: flex;
	.header-left {
		width: 130rpx;
		height: 52rpx;
		background-color: #006eff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text {
			color: white;
			font-size: 26rpx;
		}
	}
	.picker {
		width: 180rpx;
		height: 52rpx;
		margin-left: 36rpx;
		background-color: #e4f0ff;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26rpx;
		color: #4294ff;
		.iconfont {
			font-size: 20rpx;
			margin-left: 12rpx;
		}
	}
}
.content {
	width: 688rpx;
	height: 200rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 30rpx 26rpx 30rpx;
	box-shadow: 0 0 3px #e0e0e0;
	background-color: #ffffff;
	.content-left {
		width: 276rpx;
		height: 130rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 26rpx;
	}
	.content-left text:nth-child(1) {
		font-size: 30rpx;
	}
	.content-left text:nth-child(2) {
		font-size: 24rpx;
		color: #b0b0b0;
	}
	.content-left text:nth-child(3) {
		font-size: 24rpx;
		color: #b0b0b0;
	}
	.content-right {
		margin-right: 30rpx;
		navigator {
			font-size: 30rpx;
			color: #006eff;
		}
	}
}
.footer {
	width: 750rpx;
	height: 200rpx;
}
</style>
